<div class="row justify-content-center">
    <div class="row justify-content-center" style="margin-top: 80px">
        <a  href="/">
            <img src="../../../content/images/cubeai128.png" style="height: 80px">
        </a>
    </div>
</div>
<br>
<div class="row justify-content-center">
    <mat-card>
        <div *ngIf="this.reason" style="margin-top: 10px; margin-bottom: 10px">
            <span class="alert alert-danger" >{{this.reason}}</span>
        </div>
        <div class="modal-header">
            <h4>用户登录</h4>
        </div>

        <div class="modal-body">
            <div class="modal-body">
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput type="text" placeholder="用户名 | 邮箱 | 手机号" [(ngModel)]="username">
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field style="width: 100%" >
                        <input matInput type="password" placeholder="密码" [(ngModel)]="password">
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field style="width: 60%">
                        <input matInput type="text" placeholder="校验码" [(ngModel)]="myCode">
                    </mat-form-field>
                    <a (click)="getVerifyCode()">
                        <img src="{{verifyPicture}}" alt="获取验证码">
                    </a>
                </div>
                <div>
                    <br>
                    <span><a href="/#/register" style="font-size: smaller; color: black">立即注册</a></span>
                    <span style="float: right"><a href="/#/passwordreset" style="font-size: smaller; color: black">忘记密码</a></span>
                </div>
                <div *ngIf="authenticationError">
                    <br>
                    <span class="alert alert-danger" >用户名、密码或验证码不匹配</span>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button mat-raised-button color="primary" (click)="login()">
                <span class="fa fa-sign-in">&nbsp;登录</span>
            </button>
        </div>
    </mat-card>
</div>

